<template>
  <view class="container" :style="{ background: backgroundColor }">
    <!-- 头部导航 -->
    <view class="canui-head-box" :style="{ top: StatusBar + 'px' }">
      <text class="cuIcon-back" @tap="BackPage"></text>
      <text class="cuIcon-home" @tap="toHome"></text>
    </view>

    <view class="top-nav-bar" :style="{ paddingTop: StatusBar + 'px' }">
      <view class="center-title">{{ goType }}</view>
    </view>

    <view class="topUserBox" style="height: auto; padding: 0rpx;">
      <view class="UserBox bok" style="border: 0rpx;">
        <view style="border-bottom: 0rpx solid #eee; width: 100vw;">
          <!-- 已选班期 -->
          <view class="blockS">
            <view class="cu-bar bg-white border-30">
              <view class="action text-bold">
                <image class="png ma" style="width: 20px; height: 20px; margin-left: -10rpx;" role="img"
                  src="https://wxapi.qctrips.cn/yx/images/goods/date.png" mode="" />
                <text style="margin-left: 20rpx;">已选班期</text>
                <text style="margin-left: 150rpx;">{{ period.availableDate ? period.availableDate.yearDate + '-' +
                  period.availableDate.monthDate + '-' + period.availableDate.dayDate : '' }}</text>
              </view>
              <view class="action"></view>
            </view>
          </view>

          <!-- 渠道协作商家 -->
          <view class="blockS">
            <view class="cu-bar bg-white border-30">
              <view class="action text-bold">
                <image class="png ma" style="width: 20px; height: 20px; margin-left: -10rpx;" role="img"
                  src="https://wxapi.qctrips.cn/yx/images/goods/date.png" mode="" />
                <text style="margin-left: 20rpx;">渠道协作商家</text>
              </view>
              <view class="action"></view>
            </view>

            <view class="travel-agency-block">
              <view class="top-bar">
                <view class="tag-type">{{ quanju.StandbyFieldThree || '组团' }}</view>
                <text class="agency-name">{{ merchant.name }}</text>
              </view>

              <view class="info-item">
                <text class="label">客源城市</text>
                <text class="value">{{ quanju.Address }}此处暂无</text>
              </view>

              <view class="bottom-bar">
                <view class="quota">
                  <text class="label">{{ merchant.authPerson }}</text>
                  <text class="value">{{ merchant.phone }}</text>
                </view>
                <button class="reply-btn" :data-tel="merchant.phone" @tap="bohao">拨号</button>
              </view>

              <block v-for="(item, index) in person" :key="index">
                <view class="bottom-bar">
                  <view class="quota">
                    <view class="quota-type">{{ item.Type }}</view>
                    <text class="label">{{ item.Name }}</text>
                    <text class="value">{{ item.Telephone }}</text>
                  </view>
                  <button class="reply-btn" :data-tel="item.Telephone" @tap="bohao">拨号</button>
                </view>
              </block>
            </view>
          </view>

          <!-- 申请名额-答复 -->
          <view class="blockS">
            <view class="cu-bar bg-white border-30">
              <view class="action text-bold">
                <image class="png ma" style="width: 20px; height: 20px; margin-left: -10rpx;" role="img"
                  src="https://wxapi.qctrips.cn/yx/images/goods/date.png" mode="" />
                <text style="margin-left: 20rpx;">申请名额-答复</text>
              </view>
              <view class="action"></view>
            </view>

            <view style="width: 100%; padding: 0 20rpx;">
              <view
                style="width: 100%; font-size: 28rpx; font-weight: 500; margin-bottom: 10rpx; display: flex; justify-content: space-between;">
                <view>每团满员名额上限数</view>
                <view>{{ period.fullNumberOfPeople }} 人</view>
              </view>
              <view style="width: 100%; font-size: 20rpx; margin-bottom: 20rpx;">
                报名达到该人数后，系统将限制后续报名
              </view>
              <view
                style="width: 100%; font-size: 28rpx; font-weight: 500; margin-bottom: 10rpx; display: flex; justify-content: space-between;">
                <view>每期最低成团人数</view>
                <view>{{ period.leastNumberOfPeople }} 人</view>
              </view>
              <view style="width: 100%; font-size: 20rpx; margin-bottom: 20rpx;">
                低于该人数系统自动退费/解散行程/通知延期
              </view>
              <view
                style="width: 100%; font-size: 28rpx; font-weight: 500; margin-bottom: 10rpx; display: flex; justify-content: space-between;">
                <view>每期服务最大承载团数</view>
                <view>{{ period.fullNumberOfRegiment }} 团</view>
              </view>
              <view style="width: 100%; font-size: 20rpx; margin-bottom: 20rpx;">
                低于该人数系统自动退费/解散行程/通知延期
              </view>
            </view>
          </view>

          <!-- 成团确认日期 -->
          <view class="blockS">
            <view class="cu-bar bg-white border-30">
              <view class="action text-bold">
                <image class="png ma" style="width: 20px; height: 20px; margin-left: -10rpx;" role="img"
                  src="https://wxapi.qctrips.cn/yx/images/goods/date.png" mode="" />
                <text style="margin-left: 20rpx;">成团确认日期</text>
              </view>
              <view class="action"></view>
            </view>

            <view style="width: 100%; padding: 0 20rpx;">
              <view
                style="width: 100%; font-size: 28rpx; font-weight: 500; margin-bottom: 10rpx; display: flex; justify-content: space-between;">
                <view>行程日前（暂无数据）</view>
                <view>{{ period.applicationDeadline }} 天</view>
              </view>
            </view>
          </view>

          <!-- 已报名信息 -->
          <view v-if="goType == '报名详情'" class="blockS">
            <view class="cu-bar bg-white border-30">
              <view class="action text-bold">
                <image class="png ma" style="width: 20px; height: 20px; margin-left: -10rpx;" role="img"
                  src="https://wxapi.qctrips.cn/yx/images/goods/date.png" mode="" />
                <text style="margin-left: 20rpx;">已报名信息</text>
              </view>
              <view class="action"></view>
            </view>

            <view class="stats-section">
              <view class="stats-item">
                <view class="stats-data">
                  <view class="data-item">
                    <text class="number orange">4</text>
                    <text class="desc">组团团数</text>
                  </view>
                </view>
              </view>
              <view class="stats-item">
                <view class="stats-data">
                  <view class="data-item">
                    <text class="number green">3</text>
                    <text class="desc">工作人员</text>
                  </view>
                </view>
              </view>
              <view class="stats-item">
                <view class="stats-data">
                  <view class="data-item">
                    <text class="number green">3</text>
                    <text class="desc">儿童数</text>
                  </view>
                </view>
              </view>
              <view class="stats-item">
                <view class="stats-data">
                  <view class="data-item">
                    <text class="number green">3</text>
                    <text class="desc">全员人数</text>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <!-- 合作详情 -->
          <view class="blockS">
            <view class="cu-bar bg-white border-30">
              <view class="action text-bold" style="display: flex; justify-content: start; margin-left: 20rpx;">
                合作详情
              </view>
              <view class="action"></view>
            </view>

            <view v-if="goType == '答复申请'" style="width: 100%; padding: 0 20rpx;">
              <view
                style="width: 100%; font-size: 28rpx; font-weight: 500; margin-bottom: 10rpx; display: flex; justify-content: space-between;">
                <view>协议签署</view>
                <view>暂无</view>
              </view>
              <view
                style="width: 100%; font-size: 28rpx; font-weight: 500; margin-bottom: 10rpx; display: flex; justify-content: space-between;">
                <view>申请时间</view>
                <view>暂无</view>
              </view>
              <view
                style="width: 100%; font-size: 28rpx; font-weight: 500; margin-bottom: 10rpx; display: flex; justify-content: space-between;">
                <view>申请人</view>
                <view>暂无</view>
              </view>
            </view>
            <view v-else style="width: 100%; padding: 0 20rpx;">
              <view
                style="width: 100%; font-size: 28rpx; font-weight: 500; margin-bottom: 10rpx; display: flex; justify-content: space-between;">
                <view>协议签署</view>
                <view>暂无</view>
              </view>
              <view
                style="width: 100%; font-size: 28rpx; font-weight: 500; margin-bottom: 10rpx; display: flex; justify-content: space-between;">
                <view>申请时间</view>
                <view>暂无</view>
              </view>
              <view
                style="width: 100%; font-size: 28rpx; font-weight: 500; margin-bottom: 10rpx; display: flex; justify-content: space-between;">
                <view>答复时间</view>
                <view>暂无</view>
              </view>
              <view
                style="width: 100%; font-size: 28rpx; font-weight: 500; margin-bottom: 10rpx; display: flex; justify-content: space-between;">
                <view>申请人</view>
                <view>暂无</view>
              </view>
              <view
                style="width: 100%; font-size: 28rpx; font-weight: 500; margin-bottom: 10rpx; display: flex; justify-content: space-between;">
                <view>答复人</view>
                <view>暂无</view>
              </view>
              <view
                style="width: 100%; font-size: 28rpx; font-weight: 500; margin-bottom: 10rpx; display: flex; justify-content: space-between;">
                <view>班期状态</view>
                <view>暂无</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view style="height: 180rpx;"></view>

    <!-- 底部按钮 -->
    <view v-if="quanju.ApplyStatus != '同意申请'" class="bottomBtnList" style="height: 150rpx; padding-bottom: 60rpx;">
      <view class="centerRight" @tap="BackPage" style="width: 30%;">返回</view>
      <view class="centerRight1" @tap="no" style="width: 30%;">驳回重提</view>
      <view class="centerRight" @tap="ok" style="width: 30%;">同意申请</view>
    </view>
    <view v-else class="bottomBtnList" style="height: 150rpx; padding-bottom: 60rpx;">
      <view class="centerRight" @tap="BackPage" style="width: 30%;">返回</view>
      <view class="centerRight" @tap="" style="width: 30%;">退单</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'periodDetail',
  data() {
    return {
      StatusBar: 0,
      TabbarBot: 0,
      SiteId: '',
      backgroundColor: 'var(--blue)',
      checkbox_tag: [],
      feilv: 0.06,
      fold: false,
      info: [],
      datelist: [],
      quanju: {},
      person: [],
      id: 0,
      goType: null,
      merchant: {},
      merchantId: '',
      relationId: '',
      period: {}
    }
  },

  onLoad(options) {
    console.log(options)
    const { id, goType, merchantId, relationId } = options
    this.id = id
    this.goType = goType
    this.merchantId = merchantId
    this.relationId = relationId

    this.getMerchant()
    this.getPeriod()
  },

  methods: {
    // 获取商家信息
    async getMerchant() {
      try {
        const res = await this.$http.get(`merchant/getMerchantById?merchantId=${this.merchantId}`)
        this.merchant = res.data.data
      } catch (error) {
        console.error('获取商家信息失败:', error)
      }
    },

    // 获取班期信息
    async getPeriod() {
      try {
        const res = await this.$http.get(`period-sku/getPeriodById?id=${this.id}`)
        this.period = res.data.data
      } catch (error) {
        console.error('获取班期信息失败:', error)
      }
    },

    // 拨打电话
    bohao(e) {
      const tel = e.currentTarget.dataset.tel
      uni.makePhoneCall({
        phoneNumber: tel
      })
    },

    // 驳回申请
    no() {
      uni.showModal({
        title: '请输入原因',
        editable: true,
        placeholderText: '请输入评论内容',
        success: (res) => {
          console.log(res)
          if (res.cancel) {
            uni.showToast({
              title: '已取消！',
              icon: 'error',
              mask: true,
              duration: 1500
            })
          }

          if (res.confirm) {
            let data = {
              "relationId": this.relationId,
              "reply": res.content,
              "status": 2
            }

            this.$http.post('call-apply/handle', data).then(res => {
              if (res.data.code == 200) {
                uni.showToast({
                  title: '操作成功',
                  icon: 'none'
                })
                uni.navigateBack()
              }
            }).catch(error => {
              console.error('驳回申请失败:', error)
            })
          }
        }
      })
    },

    // 同意申请
    async ok() {
      try {
        let data = {
          "relationId": this.relationId,
          "reply": '',
          "status": 1
        }

        const res = await this.$http.post('call-apply/handle', data)
        if (res.data.code == 200) {
          uni.showToast({
            title: '操作成功',
            icon: 'none'
          })
          uni.navigateBack()
        }
      } catch (error) {
        console.error('同意申请失败:', error)
      }
    },

    // 返回上一页
    BackPage() {
      uni.navigateBack()
    },

    // 回到首页
    toHome() {
      uni.redirectTo({
        url: '/pages/JiDi/my/index'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 334rpx;
}

.cu-list.menu>.cu-item .action>image {
  display: inline-block;
  margin-right: 20rpx;
  width: 1.6em;
  height: 1.6em;
  vertical-align: middle;
}

.grid.col-6>view {
  width: 16.66%;
}

input {
  text-align: right;
}

.border-bottom {
  border-bottom: 1rpx solid #eee;
}

.bottomBtnList {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 750rpx;
  height: 100rpx;
  padding: 30rpx;
  background: #FFFFFF;
  box-shadow: 0rpx -4rpx 14rpx 0rpx rgba(241, 241, 241, 0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bottomBtnList .leftBtn {
  width: 222rpx;
  height: 76rpx;
  line-height: 76rpx;
  color: var(--blue);
  text-align: center;
  box-shadow: var(--ShadowSize) var(--blueShadow);
  border-radius: 38rpx;
  border: 2rpx solid var(--blue);
}

.bottomBtnList .centerRight {
  width: 222rpx;
  height: 76rpx;
  background: var(--blue);
  box-shadow: var(--ShadowSize) var(--blueShadow);
  border-radius: 38rpx;
  color: #FFFFFF;
  line-height: 76rpx;
  text-align: center;
}

.centerRight1 {
  width: 222rpx;
  height: 76rpx;
  background: var(--red);
  box-shadow: var(--ShadowSize) var(--redShadow);
  border-radius: 38rpx;
  color: #FFFFFF;
  line-height: 76rpx;
  text-align: center;
}

.text-smsm {
  font-size: 20rpx;
}

.grid>view {
  position: relative;
}

.light .cu-tag {
  position: absolute;
  right: 0;
  top: 0;
  border-bottom-left-radius: 6rpx;
  padding: 6rpx 12rpx;
  height: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.border-30 {
  border-top: 0 solid #f1f1f1;
}

.divider-h {
  height: 20rpx;
  background-color: #eee;
  margin-top: 15rpx;
  margin-left: -20rpx;
  margin-right: -20rpx;
}

.blockS {
  padding: 20rpx;
  margin-bottom: 20rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  height: auto;
}

.bok {
  padding: 20rpx;
  background-color: #eee;
}

.ma {
  margin-left: -30rpx !important;
}

.travel-agency-block {
  padding: 16rpx 24rpx;
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}

.top-bar {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.tag-type {
  background: rgba(252, 100, 47, 0.1);
  border-radius: 6rpx;
  border: 1rpx solid #FC642F;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 26rpx;
  color: #FC642F;
  line-height: 34rpx;
  text-align: right;
  font-style: normal;
  padding: 2rpx 10rpx 2rpx 10rpx;
  margin-right: 20rpx;
}

.agency-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.label {
  font-size: 28rpx;
  color: #999;
  width: 160rpx;
}

.value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.quota {
  display: flex;
  align-items: center;
}

.quota-type {
  background: rgba(252, 100, 47, 0.1);
  border-radius: 6rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 26rpx;
  color: #FC642F;
  line-height: 34rpx;
  text-align: right;
  font-style: normal;
  padding: 2rpx 10rpx 2rpx 10rpx;
  margin-right: 20rpx;
}

.reply-btn {
  background-color: #1677FF;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
  padding: 10rpx 24rpx;
  line-height: 1;
  height: auto;
  margin: 0;
}

.reply-btn::after {
  border: none;
}

.stats-section {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 22%;
  background-color: #f0f9f4;
  border: 1px solid #71c95f;
  border-radius: 8px;
  padding: 15rpx 10rpx;
  box-sizing: border-box;
}

.stats-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
  font-weight: bold;
}

.stats-data {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
}

.data-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.number {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

.orange {
  color: #ff7800;
}

.green {
  color: #3eba5b;
}

.black {
  color: #333;
}

.desc {
  font-size: 14px;
  color: #666;
}
</style>
